<template>
  <div class="ai-exercise-system">
    <!-- 页面标题 -->
    <div class="page-header">
      <h1>AI智能组卷系统</h1>
      <p class="subtitle">基于AI技术的智能试卷生成工具</p>
    </div>

    <!-- 主布局区域 -->
    <div class="main-content">
      <!-- 左侧设置区域 -->
      <div class="settings-panel">
        <div class="panel-header">
          <h3>试卷设置</h3>
        </div>

        <el-form :model="paperSettings" label-position="top" size="small">
          <el-form-item label="学科">
            <el-select v-model="paperSettings.subject" placeholder="选择学科">
              <el-option label="语文" value="chinese"></el-option>
              <el-option label="数学" value="math"></el-option>
              <el-option label="英语" value="english"></el-option>
              <el-option label="物理" value="physics"></el-option>
              <el-option label="化学" value="chemistry"></el-option>
              <el-option label="生物" value="biology"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="年级">
            <el-select v-model="paperSettings.grade" placeholder="选择年级">
              <el-option label="小学" value="primary"></el-option>
              <el-option label="初中" value="middle"></el-option>
              <el-option label="高中" value="high"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="难度">
            <el-slider v-model="paperSettings.difficulty" :max="5" :marks="difficultyMarks" />
          </el-form-item>

          <el-form-item label="题目数量">
            <el-input-number v-model="paperSettings.questionCount" :min="5" :max="50" />
          </el-form-item>

          <el-button type="primary" @click="generatePaper" class="generate-btn">生成试卷</el-button>
        </el-form>

        <div class="quick-templates">
          <h4>快速模板</h4>
          <div class="template-buttons">
            <el-button @click="applyTemplate('初中数学期中')" size="small">初中数学期中</el-button>
            <el-button @click="applyTemplate('高中物理单元')" size="small">高中物理单元</el-button>
            <el-button @click="applyTemplate('小学语文期末')" size="small">小学语文期末</el-button>
          </div>
        </div>
      </div>

      <!-- 右侧结果区域 -->
      <div class="result-panel">
        <div class="panel-header">
          <h3>试卷预览</h3>
          <div class="actions">
            <el-button type="success" size="small" @click="downloadPaper">
              <el-icon><Download /></el-icon>下载
            </el-button>
            <el-button type="primary" size="small" @click="regeneratePaper">
              <el-icon><Refresh /></el-icon>重新生成
            </el-button>
          </div>
        </div>

        <div class="paper-preview" v-if="generatedPaper">
          <div class="paper-title">{{ generatedPaper.title }}</div>
          <div class="paper-meta">
            <span>学科: {{ generatedPaper.subject }}</span>
            <span>年级: {{ generatedPaper.grade }}</span>
            <span>难度: {{ generatedPaper.difficulty }}</span>
            <span>题数: {{ generatedPaper.sections.length }}</span>
          </div>

          <div class="paper-content">
            <div v-for="(section, index) in generatedPaper.sections" :key="index" class="section">
              <h4>{{ section.title }} ({{ section.score }}分)</h4>
              <div v-for="(question, qIndex) in section.questions" :key="qIndex" class="question">
                <p>{{ qIndex + 1 }}. {{ question.text }}</p>
                <div v-if="question.options" class="options">
                  <div v-for="(option, oIndex) in question.options" :key="oIndex" class="option">
                    {{ String.fromCharCode(65 + oIndex) }}. {{ option }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div v-else class="empty-state">
          <el-empty description="尚未生成试卷">
            <el-button type="primary" @click="generatePaper">立即生成</el-button>
          </el-empty>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { Download, Refresh } from '@element-plus/icons-vue'

// 试卷设置
const paperSettings = reactive({
  subject: '',
  grade: '',
  difficulty: 3,
  questionCount: 10,
})

// 难度标记
const difficultyMarks = {
  1: '简单',
  2: '较易',
  3: '中等',
  4: '较难',
  5: '困难',
}

// 生成的试卷
interface Paper {
  title: string
  subject: string
  grade: string
  difficulty: string
  sections: {
    title: string
    score: number
    questions: {
      text: string
      options?: string[]
    }[]
  }[]
}

const generatedPaper = ref<Paper | null>(null)

// 应用快速模板
const applyTemplate = (templateType: string) => {
  switch (templateType) {
    case '初中数学期中':
      paperSettings.subject = 'math'
      paperSettings.grade = 'middle'
      paperSettings.difficulty = 3
      paperSettings.questionCount = 20
      break
    case '高中物理单元':
      paperSettings.subject = 'physics'
      paperSettings.grade = 'high'
      paperSettings.difficulty = 4
      paperSettings.questionCount = 15
      break
    case '小学语文期末':
      paperSettings.subject = 'chinese'
      paperSettings.grade = 'primary'
      paperSettings.difficulty = 2
      paperSettings.questionCount = 25
      break
  }
  ElMessage.success(`已应用${templateType}模板`)
}

// 生成试卷
const generatePaper = () => {
  if (!paperSettings.subject || !paperSettings.grade) {
    ElMessage.warning('请选择学科和年级')
    return
  }

  // 模拟生成试卷的过程
  const subjectName = {
    chinese: '语文',
    math: '数学',
    english: '英语',
    physics: '物理',
    chemistry: '化学',
    biology: '生物',
  }[paperSettings.subject]

  const gradeName = {
    primary: '小学',
    middle: '初中',
    high: '高中',
  }[paperSettings.grade]

  const difficultyText = difficultyMarks[paperSettings.difficulty as keyof typeof difficultyMarks]

  // 模拟生成的试卷数据
  generatedPaper.value = {
    title: `${gradeName || ''}${subjectName || ''}试卷`,
    subject: subjectName || '',
    grade: gradeName || '',
    difficulty: difficultyText,
    sections: [
      {
        title: '选择题',
        score: 40,
        questions: Array(Math.ceil(paperSettings.questionCount * 0.4))
          .fill(0)
          .map((_, i) => ({
            text: `这是第${i + 1}道选择题的题目内容...`,
            options: ['选项A', '选项B', '选项C', '选项D'],
          })),
      },
      {
        title: '填空题',
        score: 30,
        questions: Array(Math.ceil(paperSettings.questionCount * 0.3))
          .fill(0)
          .map((_, i) => ({
            text: `这是第${i + 1}道填空题的题目内容，请在横线处填写正确答案: ____________`,
          })),
      },
      {
        title: '解答题',
        score: 30,
        questions: Array(Math.ceil(paperSettings.questionCount * 0.3))
          .fill(0)
          .map((_, i) => ({
            text: `这是第${i + 1}道解答题的题目内容，请详细解答...`,
          })),
      },
    ],
  }

  ElMessage.success('试卷生成成功')
}

// 重新生成试卷
const regeneratePaper = () => {
  generatePaper()
}

// 下载试卷
const downloadPaper = () => {
  if (!generatedPaper.value) {
    ElMessage.warning('没有可下载的试卷')
    return
  }

  ElMessage.success('试卷下载成功')
  // 实际应用中这里应该调用下载API
}
</script>

<style scoped>
.ai-exercise-system {
  height: calc(100vh - 60px);
  display: flex;
  flex-direction: column;
  background-color: #f5f7fa;
  padding: 20px;
}

.page-header {
  margin-bottom: 20px;
  text-align: center;
}

.page-header h1 {
  margin: 0;
  font-size: 24px;
  color: #303133;
}

.page-header .subtitle {
  margin: 5px 0 0;
  font-size: 14px;
  color: #909399;
}

.main-content {
  display: flex;
  flex: 1;
  gap: 20px;
}

.settings-panel {
  width: 280px;
  background-color: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

.panel-header {
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.panel-header h3 {
  margin: 0;
  font-size: 16px;
  color: #303133;
}

.generate-btn {
  width: 100%;
  margin-top: 10px;
}

.quick-templates {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #eee;
}

.quick-templates h4 {
  margin: 0 0 15px 0;
  font-size: 14px;
  color: #606266;
}

.template-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.result-panel {
  flex: 1;
  background-color: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
}

.paper-preview {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
}

.paper-title {
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 15px;
  color: #303133;
}

.paper-meta {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 20px;
  font-size: 14px;
  color: #606266;
}

.section {
  margin-bottom: 30px;
}

.section h4 {
  margin: 0 0 10px 0;
  font-size: 16px;
  color: #303133;
  padding-bottom: 5px;
  border-bottom: 1px solid #eee;
}

.question {
  margin-bottom: 15px;
  font-size: 14px;
  line-height: 1.6;
}

.options {
  margin-top: 8px;
  margin-left: 20px;
}

.option {
  margin-bottom: 5px;
}

.empty-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.actions {
  display: flex;
  gap: 10px;
}

@media (max-width: 768px) {
  .main-content {
    flex-direction: column;
  }

  .settings-panel {
    width: 100%;
  }
}
</style>
